import React, { Component } from 'react';
import classNames from 'classnames';
import Radio from 'components/Radio';
import './index.scss';

export default class Timeline extends Component {
  render() {
    let { data, selectedVaccineIdList, onSelectVaccine } = this.props;

    if (!data) return null;

    return (
      data.map((timeline, index) => {
        let { timepoint, date, table } = timeline;

        return (
          <div className="timeline" key={index}>
            <div className="timelime-item">
              <div className="timeline-item-hd">
                <h2>{timepoint}<small>{date}</small></h2>
              </div>
              <div className="timeline-item-bd">
                <div className="card">
                  {
                    table.map((item, index) => {
                      let { id, brief, name, isfree, times, timescount } = item;

                      return (
                        <div className="row" key={index} onClick={() => onSelectVaccine(id)}>
                          <div className="info">
                            <div className={classNames('summary', { active : isfree == 1 })}>{brief}</div>
                            <div className="meta">
                              <div className="name">
                                <h3 className="title">{name}<small>{isfree == 1 ? '必打' : '推荐'}</small></h3>
                              </div>
                              <div className="times">第{times}剂／共{timescount}剂</div>
                            </div>
                          </div>
                          <Radio checked={selectedVaccineIdList.includes(id)}/>
                        </div>
                      )
                    })
                  }
                </div>
              </div>
            </div>
          </div>
        )
      })
    )
  }
}
